<template>
  <BaseCard class="h-full" :showHeadBorder="false">
    <template #header>
      <div class="flex justify-between text-white boder-bottom">
        <img class="h-[54px]" src="@/assets/images/visualization/logo.png" />
        <span class="font-bold text-2xl leading-[2] bg-icon">科研大数据中心</span>
        <span class="text-base pt-3">
          <Clock />
        </span>
      </div>
    </template>
    <div class="flex-5">
      <div class="flex-5-item" v-for="(item,index) in list" :key="index">
        <!-- <img v-if="item.icon" class="mr-2" :src="getAssetsFile(`@/assets/images/visualization/${item.icon}`)" /> -->
        <!-- <img class="mr-2" :src="getAssetsFile(`../../../assets/images/visualization/${item.icon}`)" /> -->
        <img class="mr-2" :src="item.icon" />
        <div class="flex flex-col border-left">
          <b>{{item.value}}</b>
          <span>{{item.name}}</span>
        </div>
        <div v-if="item.name2" class="flex flex-col">
          <b>{{item.value2}}</b>
          <span >{{item.name2}}</span>
        </div>
      </div>
    </div>
    <el-row :gutter="15">
      <el-col :span="6">
        <chart1 :option="option" :height="eleHeight" />
      </el-col>

      <el-col :span="12">
        <chart2 :option="option2" :height="eleHeight" />
      </el-col>

      <el-col :span="6">
        <chart3 :option="option3" :height="eleHeight" />
      </el-col>
    </el-row>
  </BaseCard>
</template>

<script setup>
import BaseCard from "./BaseCard.vue";
import {list} from "./components/chartData.js"
// import chart from "@/components/chart/index";
// import * as echarts from "echarts";
import Clock from "./components/Clock.vue";
import chart1 from "./components/chart1.vue";
import chart2 from "./components/chart2.vue";
import chart3 from "./components/chart3.vue";
import { visualApi } from "@/api/statistics";


// 纵向项目统计
async function getProjectZx (params){
  const res = await visualApi.zxStatistics()
  if (res.code == 200) {
    list[0].value = res.data.yearProjectNum
    list[0].value2 = res.data.projectSum
  }  
}

// 2-横向项目统计
const getProjectHx = async (params) => {
  const res = await visualApi.hxStatistics()
  if (res.code == 200) {
    list[1].value = res.data.yearProjectNum
    list[1].value2 = res.data.projectSum
  }
};

// 返回年度成果量和历史成果量
const getAchieveStats = async (params) => {
  const res = await visualApi.achieveStats()
  if (res.code == 200) {
    list[2].value = res.data.yearAchievementSum
    list[2].value2 = res.data.achievementSum
  }
};

// 科研学术成果统计
const getAcadAchieveStats = async (params) => {
  const res = await visualApi.acadAchieveStats()
  if (res.code == 200) {
    list[3].value = res.data.yearAchievementSum
    list[3].value2 = res.data.achievementSum
  }
};

//  科研人员统计
const getTotalResearchers = async (params) => {
  const res = await visualApi.totalResearchers()
  if (res.code == 200) {
    list[4].value = res.data.totalResearchers
  }
};


// 屏幕高度
const eleHeight = ref(0)
// 生命周期
onMounted(() => {
  getWindowResize()
  // window.addEventListener('resize', getWindowResize)
})
// 获取屏幕尺寸
const getWindowResize = function () {
  eleHeight.value = Math.floor((window.innerHeight-200 -48)/3)
}


getProjectZx()
getProjectHx()
getAchieveStats()
getAcadAchieveStats()
getTotalResearchers()
</script>

<style scoped lang="scss">
@import url("./index.scss");
</style>
